.react-bootstrap-table {

  table {
    table-layout: fixed;
  }

  th.sortable {
    cursor: pointer;
  }

  // bootstrap 3 sort
  th .order > .dropdown > .caret {
    margin: 10px 0 10px 5px;
    color: #cccccc;
  }

  th .order > .dropup > .caret {
    margin: 10px 0;
    color: #cccccc;
  }

  th > .react-bootstrap-table-sort-order > .caret {
    margin: 10px 6.5px;
  }

  // bootstrap 4 sort
  th .order-4:before {
    margin-left: 3.5px;
    content: "\2191";
    opacity: 0.4;
  }

  th .order-4:after {
    content: "\2193";
    opacity: 0.4;
  }

  th .caret-4-asc:before {
    margin-left: 3.5px;
    content: "\2191";
  }

  th .caret-4-asc:after {
    content: "\2193";
    opacity: 0.4;
  }

  th .caret-4-desc:before {
    margin-left: 3.5px;
    content: "\2191";
    opacity: 0.4;
  }

  th .caret-4-desc:after {
    content: "\2193";
  }

  th[data-row-selection] {
    width: 30px;
  }

  th > .selection-input-4,
  td > .selection-input-4 {
    margin: -4px;
  }

  td.react-bs-table-no-data {
    text-align: center;
  }

  td.react-bootstrap-table-editing-cell {
    .animated {
      animation-fill-mode: both;
    }

    .animated.bounceIn,
    .animated.bounceOut{
      animation-duration: .75s;
    }

    .animated.shake{
      animation-duration: .3s;
    }

    @keyframes shake {
      from, to {
        transform: translate3d(0, 0, 0);
      }

      10%,  50%,  90% {
        transform: translate3d(-10px, 0, 0);
      }

      30%, 70%{
        transform: translate3d(10px, 0, 0);
      }
    }

    .shake {
      animation-name: shake;
    }

    @keyframes bounceIn {
      from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      }

      0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }

      20% {
        transform: scale3d(1.1, 1.1, 1.1);
      }

      40% {
        transform: scale3d(.9, .9, .9);
      }

      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
      }

      80% {
        transform: scale3d(.97, .97, .97);
      }

      to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
      }
    }

    .bounceIn {
      animation-name: bounceIn;
    }

    @keyframes bounceOut {
      20% {
        transform: scale3d(.9, .9, .9);
      }

      50%, 55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1);
      }

      to {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
      }
    }

    .bounceOut {
      animation-name: bounceOut;
    }
  }
  .reset-expansion-style{
    padding: 0;
  }
  .row-expansion-style{
    padding: 8px;
  }
  .row-expand-slide-appear{
    max-height: 0;
    overflow: hidden;
  }
  .row-expand-slide-appear-active{
    max-height: 1000px;
    transition: max-height 3s linear;
  }
  .row-expand-slide-exit{
    max-height: 1000px;
  }
  .row-expand-slide-exit-active{
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms cubic-bezier(0, 0.95, 0, 0.95)
  }
}
